<template>
    <div id="box">
        <svg viewBox="0 0 100 100">
            <g v-for="n in 6" :key="n">
                <path
                        :d="arcPath(n - 1)"
                        :fill="color(n - 1)"
                />
            </g>
        </svg>
    </div>
</template>

<script>
export default {
    methods: {
        arcPath(n) {
            const angle = 360 / 6;
            const startAngle = n * angle;
            const endAngle = (n + 1) * angle;
            const radius = 40; // 圆的半径
            const x = 50; // 圆心的x坐标
            const y = 50; // 圆心的y坐标
            return `M ${x} ${y} L ${x + Math.cos(startAngle * (Math.PI / 180)) * radius} ${y + Math.sin(startAngle * (Math.PI / 180)) * radius} A ${radius} ${radius} 0 ${(endAngle - startAngle > 180) ? 1 : 0} 1 ${x + Math.cos(endAngle * (Math.PI / 180)) * radius} ${y + Math.sin(endAngle * (Math.PI / 180)) * radius} Z`;
        },
        color(n) {
            const colors = ['orange', 'yellow', 'orange', 'yellow', 'orange', 'yellow'];
            return colors[n];
        }
    }
};
</script>

<style lang="less">
//#app {
//    width: 200px;
//    height: 200px;
//}
//svg {
//    width: 100%;
//    height: 100%;
//}
//path {
//    stroke-width: 10;
//    stroke: black;
//    fill-rule: evenodd;
//}
</style>